<template>
<div>
  <el-dialog title="新增记录" :visible.sync="showFlag" width="50%" @close="closeDialog">
    <el-form :model="addForm" ref="addForm" label-width="100px" :rules="addRule">
      <el-row>
        <el-col :span="12">
          <el-form-item label="房间编号" prop="r_id">
            <el-input v-model="addForm.r_id" placeholder="请输入房间号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公寓编号" prop="apt_id">
            <el-input v-model="addForm.apt_id" placeholder="请输入公寓号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="电费" prop="e_charge">
            <el-input v-model="addForm.e_charge" placeholder="请输入电费"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="水费" prop="w_charge">
            <el-input v-model="addForm.w_charge" placeholder="请输入水费"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="交电费时间" prop="eTime">
            <el-date-picker v-model="addForm.eTime" style="width:100%" type="date" placeholder="请交电费时间" format="yyyy-MM-dd"  value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交水费时间" prop="wTime">
            <el-date-picker v-model="addForm.wTime" style="width:100%" type="date" placeholder="请交电费时间" format="yyyy-MM-dd"  value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="卫生情况" prop="hygiene">
            <el-select v-model="addForm.hygiene" placeholder="请选择卫生情况" :clearable=true style="width:100%">
              <el-option label="已打扫" value="10"></el-option>
              <el-option label="未打扫" value="20"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="打扫卫生时间" prop="time">
            <el-date-picker v-model="addForm.time" style="width:100%" type="date" placeholder="请交电费时间" format="yyyy-MM-dd"  value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer" align="center">
      <el-button type="success" @click="onSave('addForm')">确 定</el-button>
      <el-button @click="onCancel('addRoomForm')">取 消</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
export default {
name: "addWAndE",
  data(){
  return{
    showFlag:false,
    addForm:{
      r_id:'',
      apt_id:'',
      e_charge:'',
      w_charge:'',
      eTime:'',
      wTime:'',
      hygiene:'',
      time: ''
    },
    addRule:{
      r_id:[{required:true,message:'请输入房间号',trigger: 'blur'}]
    },
  }
  },
  methods:{
    //初始化
    init(){
      this.showFlag=true
    },
    //保存
    onSave(){
      this.$refs.addForm.validate(async valid=>{
        if(valid){
          let params={
            rId:this.addForm.r_id,
            apt_id:this.addForm.apt_id,
            eCharge:this.addForm.e_charge,
            wCharge:this.addForm.w_charge,
            eTime:this.addForm.eTime,
            wTime:this.addForm.wTime,
            hygiene:this.addForm.hygiene=='已打扫'? 10:20,
            time: this.addForm.time,
          }
          console.log(params)
          const {data:res}=await this.$http.post('/rCondition/insertRCondition',params)
          console.log(res)
          if(res.code !==200) return this.$message.error("添加房间情况失败")
          this.$message.success("添加房间情况成功")
        }
      })
      this.$emit("editCallBack")
      this.showFlag=false
    },
  // 取消
    onCancel(){
      this.showFlag=false
      this.$refs.addForm.resetFields()
    },
    //关闭对话框的回调函数
    closeDialog(){
      this.$refs.addForm.resetFields()
    }
  }
}
</script>

<style scoped>

</style>